<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <link href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/echarts.js"></script>
</head>
<body>
    <div id="app">
        <div style="width: 100%;height: 400px;box-sizing: border-box">
            <div style="width: 550px;height: 400px;float: left" id="echars1" ></div>
            <div style="width: 550px;height: 400px;float: left" id="echars2" ></div>
            <div style="width: 500px;height: 400px;float: left" id="echars3" ></div>
        </div>
        <div style="width: 100%;height: 1000px;">
           <div style="width: 1100px;height: 400px;float: left;" id="echars4"></div>
            <div style="width: 1500px;height: 400px;float: left;background-color: yellow" id="echars6" ></div>
        </div>

    </div>
数据显示
<script>
    let app=new Vue({
        el:'#app',
        data:{
            type:[],
            userinfo:'',
            searchUname:'',
            userinfoBlogCount:'',
            usernfoBlogCountQiDay:'',

        },
        methods:{
            getAlltype(){
                axios.get(`../../other/typeinfo/getAllType`).then(res=>{
                    this.type=res.data;
                  this.createMyechars1();
                })
            },
            //显示博客类别下有多少篇博客
            createMyechars1(){
                const typeAllCount = this.type.map(item=>({
                    value: parseInt(item.articleList.length),
                    name: item.tname
                }));
                var myechars = echarts.init(document.getElementById("echars1"));
                option = {
                    title: {
                        text: '博客类别',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left'
                    },
                    series: [
                        {
                            name: 'Access From',
                            type: 'pie',
                            radius: '50%',
                            data: typeAllCount,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                myechars.setOption(option);
            },
            //得到当前的用户
            getUserInfo(){
                axios.get("../../user/userinfo/getAllUserInfo").then(res=>{
                    this.userinfo=res.data.data;
                    this.createMyechars2();
                })
            },
            //用户的echars
            createMyechars2(){
                let userInfoArray=[0,0,0];
                this.userinfo.map(item=>{
                    if(item.status==1){
                        userInfoArray[0]+=1;
                    }else if(item.status==0){
                        userInfoArray[1]+=1;
                    }else if(item.status==-2){
                        userInfoArray[2]+=1;
                    }
                })
                var myechars = echarts.init(document.getElementById("echars2"));
                option = {
                    title: {
                        show:true,
                        text:"用户数据显示"
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: ['管理员','用户','封禁'],
                            axisTick: {
                                alignWithLabel: true
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '人数',
                            type: 'bar',
                            barWidth: '60%',
                            data:userInfoArray
                        }
                    ]
                };
                myechars.setOption(option);
            },
            //得到用户的blog数量
            getUserinfoBlog(){
                axios.get("../../user/userinfo/getUserinfoBlogByUsid").then(res=>{
                  this.userinfoBlogCount=res.data.data;
                  this.createMyechars3();
                })
            },
            createMyechars3(){
                let userinfoArray=[];
                this.userinfoBlogCount.map(item=>{
                  var userinfBoject=  {
                      value:item.articleList.length,
                      name:item.uname,
                    }
                    userinfoArray.push(userinfBoject);
                });
                console.log(userinfoArray)

                var myechars = echarts.init(document.getElementById("echars3"));
                option = {
                    title: {
                        text: '用户发表博客数量',
                        subtext: 'Fake Data',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left'
                    },
                    series: [
                        {
                            name: 'Access From',
                            type: 'pie',
                            radius: '50%',
                            data: userinfoArray,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                myechars.setOption(option);
            },
            //得到最近七天用户发表blog的数量
            countUserNumber(){
                axios.get("../../other/article/countUserNumber").then(res=>{
                    this.usernfoBlogCountQiDay=Object.entries(res.data.data);
                    console.log(this.usernfoBlogCountQiDay)
                    this.createMyechars4();
                })

            },
            createMyechars4(){
                let day=[];
                let count=[]
                this.usernfoBlogCountQiDay.map(item=>{
                   day.push(item[0]);
                   count.push(item[1]);
                });
                console.log(day);
                console.log(count)
                var myechars = echarts.init(document.getElementById("echars4"));
                option = {
                    title:{
                        text:'近七天用户发表blog数量'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data:day
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: '篇数',
                            data:count,
                            type: 'line'
                        }
                    ]
                };
                myechars.setOption(option);
            },
        },
        created() {
            this.getAlltype();
            this.getUserInfo();
            this.getUserinfoBlog();
            this.countUserNumber();
        },
        mounted() {
        }
    })





</script>
</body>
</html>